<template>
    <div class="news" ref="brand">
        <div class="top">
            <div class="newLeft">
                <p>{{ one.title }}</p>
                <span>{{ one.desc }}</span>
            </div>
           <div class="right">
            <button class="iconfont icon-angle-left" @click="left" :style="{background:back}" :disabled="back=='gray'"></button>
            <button class="iconfont icon-angle-right" @click="right" :style="{background:ground1}" :disabled="ground1=='gray'"></button>
           </div>
        </div>
        <ul class="foot" ref="foot">
            <li v-for="item in brand" :key="item.id">
                <img :src="item.picture" alt="">
            </li>
        </ul>
    </div>
</template>

<script>
import {getBrand} from '@/Api/homeapi'
import { server } from '@/Api/constUp'
export default {
    props: {
        one: {
            type: Object
        }
    },
    data(){
        return{
            brand:[],
            flag:true,
            back:'#27BA9B',
            ground1:'#cccccc'
        }
    },
    methods:{
        async getBra(){
            let {data:res} = await getBrand(10)
            // console.log(res);
            this.brand = res.result
        },
        left(){
            this.ground1='#27BA9B'
            this.back = '#cccccc'
            this.$refs.foot.style.marginLeft=-1240+'px'
        },
        right(){
            this.back = '#27BA9B'
            this.ground1='#cccccc'
            this.$refs.foot.style.marginLeft=0+'px'
        }
    },
    mounted(){
        // this.getBra()
        server(this.$refs.brand,this.getBra)
    }
}
</script>



<style lang="scss" scoped>
@import '@/assets/css/variables.scss';


.news {
    width: 1240px;
    height: 420px;
    // background: white;
    margin: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    .top {
        width: 100%;
        height: 35px;
        margin-top: 40px;
        margin-bottom: 40px;
        // background: orange;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .newLeft {
            width: 300px;
            height: 100%;
            // background: yellow;
            display: flex;
            justify-content: space-between;
            align-items: center;

            p {
                font-size: 32px;
                text-align: center;
            }

            span {
                color: grey;
            }
        }
        .right{
            width: 50px;
            display: flex;
            justify-content: space-between;
            button{
                border: none;
                outline: none;
                color: white;
            }
        }
    }

    .foot{
        // background: orange;
        width: 2480px;
        height: 305px;
        display: flex;
        justify-content: space-between;
        padding-bottom: 40px;
        transition: all 2s;
        li{
            width: 240px;
            height: 100%;
            background: yellow;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }




}
</style>